<template>
    <div class="invitation">
        <vue-header title="邀请" :left-options="{backText: ''}">

        </vue-header>
        <div class="invitation-content">
            <div class="invitation-content-view">
                <div class="invitation-content-view-qr">
                    <qrcode :value="qr"></qrcode>
                </div>
                <div class="invitation-content-view-text">
                    分享二维码到微信、朋友圈等媒体 邀请朋友进店抢优质好货
                </div>
                <div class="invitation-content-btu">
                    <div class="invitation-content-btu-defu">点击分享</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import vueHeader from "@/components/vue-header/index";
import { Qrcode } from "vux";
export default {
  components: {
    vueHeader,
    Qrcode
  },
  data() {
    return {
      qr: "http://192.168.1.119:8080"
    };
  }
};
</script>
<style lang="scss" scoped>
.invitation {
  height: 100%;
  .invitation-content {
    height: calc(100vh - 46px);
    overflow: auto;
    background-image: url(./../../assets/images/share_bg.png);
    background-size: 100% 100%;
  }
  .invitation-content-view-qr {
    width: 160px;
    margin: 60% auto 0;
  }
  .invitation-content-view-text {
    font-size: 0.4533rem;
    color: rgba(51, 51, 51, 1);
    margin: 10% 15% 0;
    text-align: center;
    line-height: 0.8rem;
  }
  .invitation-content-btu {
    margin: 0.7733rem 0;

    .invitation-content-btu-defu {
      background: linear-gradient(
        90deg,
        rgba(242, 3, 0, 1),
        rgba(254, 78, 19, 1)
      );
      border-radius: 0.08rem;
      margin: 0 15%;
      height: 1.1733rem;
      line-height: 1.1733rem;
      font-size: 0.4267rem;
      font-weight: normal;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
  }
}
</style>
